<template>
  <div class="blog-detail-skeleton">
    <!-- 左边菜单骨架 -->
    <aside class="blog-sidebar-skeleton">
      <!-- 标题骨架 -->
      <div class="sidebar-section">
        <div class="skeleton-bar title-bar"></div>
      </div>

      <!-- 分类骨架 -->
      <div class="sidebar-section">
        <div class="skeleton-bar subtitle-bar"></div>
        <div class="sidebar-divider"></div>
        <div class="sidebar-categories-skeleton">
          <div class="skeleton-bar category-bar" v-for="i in 5" :key="i"></div>
        </div>
      </div>

      <!-- 最近文章骨架 -->
      <div class="sidebar-section">
        <div class="skeleton-bar subtitle-bar"></div>
        <div class="sidebar-divider"></div>
        <div class="sidebar-posts-skeleton">
          <div class="post-item-skeleton" v-for="i in 3" :key="i">
            <div class="skeleton-bar post-title-bar"></div>
            <div class="skeleton-bar post-date-bar"></div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 右边内容骨架 -->
    <div class="blog-content-skeleton">
      <!-- 标题骨架 -->
      <div class="skeleton-bar content-title-bar"></div>
      <!-- 日期骨架 -->
      <div class="skeleton-bar content-date-bar"></div>

      <!-- 内容骨架 -->
      <div class="content-body-skeleton">
        <div class="skeleton-bar content-paragraph" v-for="i in 8" :key="i"></div>
        <div class="skeleton-bar content-image"></div>
        <div class="skeleton-bar content-paragraph" v-for="i in 6" :key="`p2-${i}`"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 骨架屏不需要业务逻辑
</script>

<script lang="ts">
// 添加默认导出
export default {
  name: 'BlogSkeleton'
};
</script>

<style scoped lang="scss">
// 骨架屏动画
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

// 骨架条基础样式
.skeleton-bar {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 16px;
}

.blog-detail-skeleton {
  width: 1200px;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
}

.blog-sidebar-skeleton {
  width: 240px;
  margin-right: 20px;
}

.sidebar-section {
  margin-bottom: 28px;
}

.title-bar {
  height: 20px;
  width: 80%;
  margin-bottom: 15px;
}

.subtitle-bar {
  height: 14px;
  width: 70%;
  margin-bottom: 6px;
}

.sidebar-divider {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 12px;
}

.sidebar-categories-skeleton {
  .category-bar {
    height: 14px;
    width: 75%;
    margin-bottom: 12px;
    
    &:nth-child(odd) {
      width: 85%;
    }
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.sidebar-posts-skeleton {
  .post-item-skeleton {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
    
    .post-title-bar {
      height: 12px;
      width: 100%;
      margin-bottom: 10px;
    }
    
    .post-date-bar {
      height: 10px;
      width: 40%;
      margin-bottom: 2px;
    }
  }
}

.blog-content-skeleton {
  width: 920px;
  
  .content-title-bar {
    height: 26px;
    width: 60%;
    margin-bottom: 12px;
  }
  
  .content-date-bar {
    height: 12px;
    width: 25%;
    margin-bottom: 30px;
  }
  
  .content-body-skeleton {
    .content-paragraph {
      height: 16px;
      width: 100%;
      margin-bottom: 16px;
      
      &:nth-child(even) {
        width: 95%;
      }
      
      &:nth-child(3n) {
        width: 90%;
      }
    }
    
    .content-image {
      height: 300px;
      width: 100%;
      margin: 25px 0;
    }
  }
}

// 响应式样式
@media (max-width: 1240px) {
  .blog-detail-skeleton {
    width: 95%;
    padding: 0 20px;
  }
  
  .blog-content-skeleton {
    width: calc(100% - 260px);
  }
}

@media (max-width: 768px) {
  .blog-detail-skeleton {
    flex-direction: column;
  }
  
  .blog-sidebar-skeleton {
    width: 100%;
    margin-right: 0;
    margin-bottom: 40px;
  }
  
  .blog-content-skeleton {
    width: 100%;
  }
}
</style> 